<template>
  <div class="teacher-home-container">
    <!-- 欢迎区域 -->
    <el-card class="welcome-card" shadow="never">
      <div class="welcome-content">
        <div class="welcome-info">
          <h2>您好，{{ user.name }}老师！</h2>
          <p>今天是{{ todayFullDate }}，祝您教学愉快！</p>
        </div>
        <div class="subject-badge">
          <el-tag type="success" size="large" effect="dark">
            <el-icon><Reading /></el-icon>
            {{ teachSubject }}教师
          </el-tag>
        </div>
      </div>
    </el-card>

    <!-- 教学统计 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon" style="background-color: rgba(24, 144, 255, 0.1);">
              <el-icon color="#1890FF"><User /></el-icon>
            </div>
            <div class="stat-data">
              <p class="stat-title">学生总数</p>
              <p class="stat-value">{{ stats.studentCount }}</p>
              <p class="stat-desc">活跃学生38人</p>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon" style="background-color: rgba(247, 147, 26, 0.1);">
              <el-icon color="#F7931A"><Document /></el-icon>
            </div>
            <div class="stat-data">
              <p class="stat-title">待批改作业</p>
              <p class="stat-value">{{ stats.pendingHomework }}</p>
              <p class="stat-desc">今日新增5份</p>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon" style="background-color: rgba(82, 196, 26, 0.1);">
              <el-icon color="#52C41A"><Message /></el-icon>
            </div>
            <div class="stat-data">
              <p class="stat-title">未读消息</p>
              <p class="stat-value">{{ stats.unreadMessages }}</p>
              <p class="stat-desc">3条来自家长</p>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card" shadow="hover">
          <div class="stat-content">
            <div class="stat-icon" style="background-color: rgba(235, 47, 47, 0.1);">
              <el-icon color="#EB2F2F"><Calendar /></el-icon>
            </div>
            <div class="stat-data">
              <p class="stat-title">本周课程</p>
              <p class="stat-value">{{ stats.weekCourses }}</p>
              <p class="stat-desc">已完成4节</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <!-- 今日课程 -->
      <el-col :span="12">
        <el-card class="section-card" shadow="never">
          <template #header>
            <div class="section-header">
              <h3 class="section-title">今日课程安排</h3>
              <span class="date">{{ todayDate }}</span>
            </div>
          </template>
          <el-timeline>
            <el-timeline-item 
              v-for="(course, index) in todayCourses" 
              :key="index"
              :timestamp="course.time"
              :hollow="index === 0"
              :color="getCourseColor(course.subject)"
              placement="top"
            >
              <el-card shadow="hover" class="course-card">
                <div class="course-info">
                  <div class="course-header">
                    <h4>{{ course.title }}</h4>
                    <el-tag :type="getSubjectTagType(course.subject)" size="small">
                      {{ course.subject }}
                    </el-tag>
                  </div>
                  <p class="course-detail">
                    <el-icon><OfficeBuilding /></el-icon>
                    {{ course.classroom }} · {{ course.class }}
                  </p>
                  <div class="course-actions">
                    <el-button 
                      size="small" 
                      :type="course.hasPrep ? 'primary' : 'default'" 
                      @click="gotoCoursePrep(course.id)"
                    >
                      <el-icon><Document /></el-icon>
                      {{ course.hasPrep ? '备课资料' : '暂无资料' }}
                    </el-button>
                    <el-button size="small" type="text">
                      <el-icon><Clock /></el-icon>
                      课前提醒
                    </el-button>
                  </div>
                </div>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </el-col>

      <!-- 待办事项 -->
      <el-col :span="12">
        <el-card class="section-card" shadow="never">
          <template #header>
            <div class="section-header">
              <h3 class="section-title">待办事项</h3>
              <el-button size="small" type="primary" @click="addTodo" text>
                <el-icon><Plus /></el-icon>
                添加
              </el-button>
            </div>
          </template>
          <div class="todo-list">
            <div 
              v-for="(todo, index) in todoList" 
              :key="index" 
              class="todo-item"
              :class="{ completed: todo.completed }"
            >
              <div class="todo-content">
                <el-checkbox 
                  v-model="todo.completed" 
                  @change="updateTodoStatus(index)"
                >
                  <span class="todo-text">{{ todo.content }}</span>
                </el-checkbox>
              </div>
              <div class="todo-actions">
                <el-button size="small" @click="editTodo(index)" text>
                  <el-icon><Edit /></el-icon>
                </el-button>
                <el-button size="small" type="danger" @click="deleteTodo(index)" text>
                  <el-icon><Delete /></el-icon>
                </el-button>
              </div>
            </div>
          </div>
          <div v-if="todoList.length === 0" class="empty-todo">
            <el-empty description="暂无待办事项" :image-size="80" />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useLoginStore } from '../../../../stores/index.js';
import { 
  User, 
  Document, 
  Message, 
  Calendar,
  Reading,
  OfficeBuilding,
  Clock,
  Plus,
  Edit,
  Delete
} from '@element-plus/icons-vue';

// 获取登录用户信息
const loginStore = useLoginStore();
const user = loginStore.user;

// 教师基本信息
const teachSubject = ref('语文');

// 统计数据
const stats = ref({
  studentCount: 42,
  pendingHomework: 15,
  unreadMessages: 8,
  weekCourses: 12
});

// 完整日期显示
const todayFullDate = computed(() => {
  const date = new Date();
  const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
  return `${date.getFullYear()}年${(date.getMonth() + 1)}月${date.getDate()}日 ${weekDays[date.getDay()]}`;
});

// 今日日期
const todayDate = computed(() => {
  const date = new Date();
  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
});

// 今日课程
const todayCourses = ref([
  {
    id: 1,
    time: '08:30-09:10',
    subject: '语文',
    title: '第三单元阅读课 - 《秋天的雨》',
    class: '三年级(2)班',
    classroom: '302教室',
    hasPrep: true
  },
  {
    id: 2,
    time: '10:20-11:00',
    subject: '语文',
    title: '作文指导 - 写景作文技巧',
    class: '三年级(2)班',
    classroom: '302教室',
    hasPrep: true
  },
  {
    id: 3,
    time: '14:00-14:40',
    subject: '班会',
    title: '安全教育主题班会',
    class: '三年级(2)班',
    classroom: '302教室',
    hasPrep: false
  }
]);

// 待办事项
const todoList = ref([
  { content: '批改语文练习册P25-30页', completed: false },
  { content: '准备明天《秋天的雨》教案', completed: false },
  { content: '回复家长关于作业的疑问', completed: true },
  { content: '更新学生成绩记录', completed: false }
]);

// 获取课程颜色
const getCourseColor = (subject) => {
  const colorMap = {
    '语文': '#1890FF',
    '数学': '#52C41A',
    '英语': '#F7931A',
    '班会': '#EB2F2F'
  };
  return colorMap[subject] || '#722ED1';
};

// 获取科目标签类型
const getSubjectTagType = (subject) => {
  const typeMap = {
    '语文': 'primary',
    '数学': 'success', 
    '英语': 'warning',
    '班会': 'danger'
  };
  return typeMap[subject] || 'info';
};

// 处理待办事项状态更新
const updateTodoStatus = (index) => {
  todoList.value[index].completed = !todoList.value[index].completed;
};

// 添加待办事项
const addTodo = () => {
  const newContent = prompt('请输入待办事项内容：');
  if (newContent) {
    todoList.value.unshift({
      content: newContent,
      completed: false
    });
  }
};

// 编辑待办事项
const editTodo = (index) => {
  const newContent = prompt('编辑待办事项：', todoList.value[index].content);
  if (newContent) {
    todoList.value[index].content = newContent;
  }
};

// 删除待办事项
const deleteTodo = (index) => {
  if (confirm('确定删除这个待办事项吗？')) {
    todoList.value.splice(index, 1);
  }
};

// 前往备课资料
const gotoCoursePrep = (courseId) => {
  console.log('前往备课资料:', courseId);
};
</script>

<style scoped lang="scss">
.teacher-home-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.welcome-card {
  margin-bottom: 24px;
  border: none;
  background: linear-gradient(135deg, #f0f8ff, #e6f7ff);
  border-radius: 12px;
  
  .welcome-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
  }
  
  .welcome-info {
    h2 {
      color: #1e293b;
      margin-bottom: 8px;
      font-size: 24px;
      font-weight: 600;
    }
    
    p {
      color: #64748b;
      margin: 0;
      font-size: 14px;
    }
  }
  
  .subject-badge {
    .el-tag {
      font-size: 14px;
      padding: 8px 16px;
      
      .el-icon {
        margin-right: 4px;
      }
    }
  }
}

.stats-row {
  margin-bottom: 24px;
  
  .el-col {
    margin-bottom: 16px;
  }
}

.stat-card {
  border: none;
  border-radius: 12px;
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
  }
  
  .stat-content {
    display: flex;
    align-items: center;
    padding: 20px;
  }
  
  .stat-icon {
    font-size: 20px;
    margin-right: 16px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
  }
  
  .stat-data {
    flex-grow: 1;
    
    .stat-title {
      color: #64748b;
      font-size: 14px;
      margin-bottom: 4px;
      font-weight: 500;
    }
    
    .stat-value {
      font-size: 28px;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 4px;
      line-height: 1.2;
    }
    
    .stat-desc {
      color: #94a3b8;
      font-size: 12px;
      margin: 0;
    }
  }
}

.section-card {
  margin-bottom: 24px;
  border: none;
  border-radius: 12px;
  
  :deep(.el-card__header) {
    border-bottom: 1px solid #f1f5f9;
    padding: 16px 20px;
    background-color: #f8fafc;
  }
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
  
  .section-title {
    margin: 0;
    font-size: 16px;
    color: #1e293b;
    font-weight: 600;
  }
  
  .date {
    color: #64748b;
    font-size: 14px;
  }
}

.course-card {
  border: none;
  border-radius: 8px;
  margin-bottom: 8px;
  
  .course-info {
    .course-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
      
      h4 {
        margin: 0;
        font-size: 14px;
        color: #1e293b;
        font-weight: 500;
        flex-grow: 1;
        margin-right: 12px;
      }
    }
    
    .course-detail {
      color: #64748b;
      font-size: 13px;
      margin: 8px 0;
      display: flex;
      align-items: center;
      
      .el-icon {
        margin-right: 4px;
        font-size: 12px;
      }
    }
    
    .course-actions {
      display: flex;
      gap: 8px;
      margin-top: 12px;
      
      .el-button {
        .el-icon {
          margin-right: 4px;
        }
      }
    }
  }
}

.todo-list {
  .todo-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
    
    &:last-child {
      border-bottom: none;
    }
    
    &.completed {
      .todo-text {
        color: #94a3b8;
        text-decoration: line-through;
      }
    }
    
    .todo-content {
      flex-grow: 1;
      
      :deep(.el-checkbox) {
        width: 100%;
        
        .el-checkbox__label {
          width: 100%;
        }
      }
      
      .todo-text {
        font-size: 14px;
        color: #1e293b;
      }
    }
    
    .todo-actions {
      display: flex;
      gap: 4px;
      opacity: 0;
      transition: opacity 0.3s;
    }
    
    &:hover .todo-actions {
      opacity: 1;
    }
  }
}

.empty-todo {
  padding: 40px 0;
}

:deep(.el-timeline) {
  padding-left: 8px;
  
  .el-timeline-item__timestamp {
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 4px;
  }
}

@media (max-width: 768px) {
  .teacher-home-container {
    padding: 12px;
  }
  
  .welcome-content {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  
  .stat-card {
    .stat-content {
      padding: 16px;
    }
    
    .stat-icon {
      width: 40px;
      height: 40px;
      margin-right: 12px;
    }
    
    .stat-value {
      font-size: 24px !important;
    }
  }
  
  .section-header {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 8px;
  }
  
  .todo-actions {
    opacity: 1 !important;
  }
}
</style>